<!DOCTYPE html>
<html>
<head>
    <title>五宝回收</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/base.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/component.css?1232445">
    <link rel="stylesheet" type="text/css" href="${s.base}/mobile/js/DateSelector/DateSelector.css?rev=@@hash"/>

    <style type="text/css">
        body,html{background: #e4e4e4;}
        .weui-btn{line-height: 90px; height: 90px; font-size: 28px; width: 80%;}
        button.weui-btn, input.weui-btn{width: 80%;}
        .date-selector-container{height: 350px;}
        .date-selector-content .date-selector{height: 270px;}
        .date-selector-tab-box{height: 47px;line-height: 47px; color: #999999; }
        .date-selector-btn-box{height: 80px; line-height: 80px;}
        .date-selector-btn-box .date-selector-btn{color: #000000;}
        .date-selector-tab-box .date-selector-tab-active{color: #666666;}
        .date-selector-content{top:80px;}
        .date-selector-content li {
            font-size: 28px;
        }
    </style>
</head>
<!-- 企业下单 -->
<body>
<div style="width:100%;height:auto; margin-bottom: 10px;"><img src="/mobile/images/banner101.png"></div>

<div class="xyg-comp-form">
    <div class="xyg-comp-form-item-one">
        <div class="xyg-comp-form-item-title">
            联系电话
        </div>
        <div class="xyg-comp-form-item-content">
            <input type="text" id="phone" value="${webMember.phone}" placeholder="请先填写联系电话" />
        </div>
        <div class="clearBoth"></div>
    </div>
    <div class="xyg-comp-form-item-one">
        <div class="xyg-comp-form-item-title">
            上门地址
        </div>
        <div class="xyg-comp-form-item-content">
            <input type="text" id="address" placeholder="请先填写上门地址" value="${webMember.addressName}" />
        </div>
        <div class="clearBoth"></div>
    </div>
</div>
<style type="text/css">
    .xyg-sel-btn{line-height:70px; font-size:28px; float: left; color: #000000; background: #ffffff;  text-align: center; width: 40%; margin: 10px 4.9%;}
    .xyg-sel-btn-active{color: #FFFFFF; background: #1aad19;}
    .xyg-sel{width: 98%; height: 60px; border: 1px solid #1aad19; margin-top: 19px;border-radius: 30px;}
    .xyg-sel-input{width: 50%; height: 60px; font-size: 22px; text-align: center; color: #000000; background: #ffffff; line-height: 60px; float: left;}
    .xyg-sel-input-active{background: #1aad19; color: #ffffff;}
</style>
<div style="margin-top: 30px;">
    <div style=" line-height:60px; font-size:32px; color: #000000; text-align: center; width: 100%; ">
        可选择预估重量
    </div>
    <div style="line-height:40px; font-size:28px; color: #ff0000; text-align: center; width: 100%; ">
        (小于10公斤暂不保证上门回收）
    </div>
    <div style="width: 100%; height: auto; margin: 20px 0px;">
        <div class="xyg-sel-btn xyg-sel-btn-active">10-25公斤</div>
        <div class="xyg-sel-btn">25-50公斤</div>
        <div class="xyg-sel-btn">50-250公斤</div>
        <div class="xyg-sel-btn">250公斤以上</div>
        <div style="clear: both;"></div>
    </div>
</div>
<input type="hidden" id="reserveShow" value="尽快上门">
<div class="xyg-comp-form">
    <div class="xyg-comp-form-item-one">
        <div class="xyg-comp-form-item-title">
            预约时间
        </div>
        <div class="xyg-comp-form-item-icon">
            <div class="xyg-sel" style="float: right;">
                <div class="xyg-sel-input xyg-sel-inbtn xyg-sel-input-active" data-id="1" style="border-radius: 30px 0px 0px 30px;">尽快上门</div>
                <div class="xyg-sel-input xyg-sel-inbtn"  id="reserveTime" data-id="2" style="border-radius: 0px 30px 30px 0px;">预约上门</div>
                <div class="clearBoth"></div>
            </div>
        </div>
        <div class="clearBoth"></div>
    </div>
    <div style="width: 100%; height: 40px;"></div>
    <!--<div class="xyg-comp-form-tip">
          <input id="checkContract" type="checkbox"/>统一《环保协议》的所得税法水电费水电费水电费是否对
    </div> -->
    <input type="button" id="save" class="weui-btn weui-btn_primary color-bs margin-top-1rem" value="一键回收"/>
    <div id="targetContainers" class="xyg-sel-inbtn" data-id="2"></div>
</div>
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="${s.base}/mobile/js/jquery-2.1.4.js"></script>
<script src="${s.base}/mobile/js/jquery-weui.js"></script>
<script src="${s.base}/mobile/fonts/iconfont.js"></script>
<script src="${s.base}/mobile/js/component.js"></script>
<script src="${s.base}/mobile/js/base.js"></script>
<script src="${s.base}/mobile/js/DateSelector/DateSelector.js"></script>


<!--js分享代码开始-->
<input type="hidden" value="${jSTicketShareResponse.appid}" id="appid" />
<input type="hidden" value="${jSTicketShareResponse.fxTitle}" id="fxTitle" />
<input type="hidden" value="${jSTicketShareResponse.fxImgUrl}" id="fxImgUrl" />
<input type="hidden" value="${jSTicketShareResponse.fxDesc}" id="fxDesc" />
<input type="hidden" value="${jSTicketShareResponse.fxUrl}" id="fxUrl" />
<input type="hidden" value="${jSTicketShareResponse.nonceStr}" id="nonceStr" />
<input type="hidden" value="${jSTicketShareResponse.timestamp}" id="timestamp" />
<input type="hidden" value="${jSTicketShareResponse.signature}" id="signature" />
<script src="${s.base}/mobile/js/share.js"></script>
<script type="text/javascript">
    var memberId = '${memberId}';
    new DateSelector({
        input: 'reserveTime',//点击触发插件的input框的id
        container: 'targetContainers',//插件插入的容器id
        type: 1,
        //0：不需要tab切换，自定义滑动内容，建议小于三个；
        //1：需要tab切换，【年月日】【时分】完全展示，固定死，可设置开始年份和结束年份
        param: [1, 1, 1, 1, 1],
        //设置['year','month','day','hour','minute'],1为需要，0为不需要,需要连续的1
        beginTime: [2019, 9, 7, 1, 1],//如空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点，数组的值对应param参数的对应值。
        endTime: [2027, 5, 7, 12, 2],//如空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点，数组的值对应param参数的对应值。
        recentTime: [],//如不需要设置当前时间，被为空数组，如需要设置的开始的时间点，数组的值对应param参数的对应值。
        success: function (arr, arr2) {
            $("#reserveShow").val(arr2[0]+"-"+arr2[1]+"-"+arr2[2]+" "+arr2[3]+":"+arr2[4]+"");
            $("#reserveTime").html(arr2[0]+"-"+arr2[1]+"-"+arr2[2]+" "+arr2[3]+":"+arr2[4]+"");
        }//回调
    });

    $(".xyg-sel-btn").bind("click",function () {
        $(".xyg-sel-btn").removeClass("xyg-sel-btn-active");
        $(this).addClass("xyg-sel-btn-active");
    });
    $(".xyg-sel-inbtn").bind("click",function () {
        $(".xyg-sel-input").removeClass("xyg-sel-input-active");
        var num=$(this).attr("data-id");
        if(num=="2"){
            $("#reserveTime").addClass("xyg-sel-input-active");
        }else{
            $("#reserveShow").val("尽快上门");
            $(this).addClass("xyg-sel-input-active");
        }
    });

    $("#save").on("click", function () {
        /*if($('#checkContract').is(':checked') == false) {
         $.toast("请同意环保协议", "text");
         return false;
         }*/

        var phone = $("#phone").val();
        if (phone == null || phone == "") {
            $.toast("请先填写联系电话", "text");
            return false;
        }
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) {
            $.toast("手机号码有误，请重填", "text");
            return false;
        }
        // 小区名称
        var address = $("#address").val();
        if (address == null || address == "") {
            $.toast("请先填写上门地址", "text");
            return false;
        }
        var reserveShow = $("#reserveShow").val();
        if (reserveShow == null || reserveShow == "") {
            $.toast("请选择预约时间", "text");
            return false;
        }
        var content = $(".xyg-sel-btn-active").html();
        if (content == null || content == "") {
            $.toast("请选择回收重量", "text");
            return false;
        }

        var param = {
            memberId: memberId,
            phone: phone,
            address: address,
            reserveTime: reserveShow,
            content: content,
            type: '1',
            status: '1',
        };
        $.showLoading("正在提交中");
        $.post("/phone/recoveryCircleOrderSave", param, function (result) {
            if (0 == result.code) {
                // showLayerAlertNoRefre("操作成功！");
                $.hideLoading();
                $.alert("提交成功",function () {
                    goFistPage(memberId);
                });
            } else {
                $.hideLoading();
                $.alert(result.msg);
            }
        }, "json");
    });
</script>
</html>
